import React,{useReducer,useEffect} from 'react'
import './shop.css'
import { SwipeAction, List } from 'antd-mobile';

import {initState,actions,reducer,getShopList,getArrList,getCheckAll} from '../reducer'

export default function ShopTop(props) {
    const [state, dispatch] = useReducer(reducer, initState)
    console.log(props.arr,'11111111111111');
    // console.log(getArrList(state),"22222222222222222");
    useEffect(() => {
    }, [])
    let checkOne =()=>{
        dispatch(actions.changeCheckAll(props.arr.every(item=>item.checked)))
    }
    return (
        <div>
            <div className="shop_header">
                <span className="active_shop_span">商品</span>
                <span>评价</span>
                <span>详情</span>
                <span>推荐</span>
            </div>
            <List>
                {
                    props.arr.map(item => {
                        return <SwipeAction
                            style={{ backgroundColor: 'gray' }}
                            autoClose
                            key={item.id}
                            right={[
                                {
                                    text: '删除',
                                    // onPress: () => console.log('delete'),
                                    style: { backgroundColor: '#F4333C', color: 'white' },
                                },
                            ]}>
                            <List.Item>
                                <div className="lis">
                                    <div className="input">
                                        <input
                                            type="checkbox"
                                            name=""
                                            className="checkone"
                                            defaultChecked={item.checked}
                                            onChange={()=>checkOne()}
                                        />
                                    </div>
                                    <div className="img"><img src={item.img} alt="" /></div>
                                    <div className="text">
                                        <h3>{item.goodsname}</h3>
                                        {/* <h4>55555555</h4>
                                        <div className="ele">ele</div>
                                        <div className="new">new</div> */}
                                        <div className="price">
                                            <div className="price_l">
                                                <span style={{ marginRight: "0.2rem", color: "#ff6040" }}
                                                >￥{item.price}</span>
                                                {/* <del style={{ color: "#aaa" }}>￥{item.}</del> */}
                                            </div>
                                            <div className="price_r">
                                                <span className="add">+</span>
                                                <span>{item.num}</span>
                                                <span className="sub">-</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </List.Item>
                        </SwipeAction>
                    })
                }


            </List>
        </div>
    )
}
